/*
* @Author: Choisaaaa
* @Date: 2018/5/3  17:29
* 商品列表组件中 的 搜索组件
*/

import React from "react";
class ListSearch extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            searchType : "productId",
            searchKeyWord : ""
        }
    }
    onValueChange(e){
        let name = e.target.name;
        let value = e.target.value.trim();
        this.setState({
            [name] : value
        });
        //按商品的状态进行搜索
        if(value == "status--1"){
            this.setState({
                searchType : "status",
                searchKeyWord : -1
            },()=>{
                this.onSearch();
            });
        }else if(value == "status-0"){
            this.setState({
                searchType : "status",
                searchKeyWord : 0
            },()=>{
                this.onSearch()
            });
        }else if(value == "status-1"){
            this.setState({
                searchType : "status",
                searchKeyWord : 1
            },()=>{
                this.onSearch()
            });
        }else if(value == "status-2"){
            this.setState({
                searchType : "status",
                searchKeyWord : 2
            },()=>{
                this.onSearch()
            });
        }
    }
    onSearch(){
        this.props.onSearch(this.state.searchType,this.state.searchKeyWord);
    }
    onSearchKeywordKeyUp(e){
        if(e.keyCode === 13){
            this.onSearch()
        }
    }
    render(){
        return(
            <div className="row search-wrap">
                <div className="col-md-12">
                    <div className="form-inline">
                        <div className="form-group">
                            <select className="form-control"
                                    name="searchType"
                                    onChange={(e) => this.onValueChange(e)}>
                                <option value="productId">按商品ID查询</option>
                                <option value="productName">按商品名查询</option>
                                <option value="status--1">已经下架商品</option>
                                <option value="status-0">不合格的商品</option>
                                <option value="status-1">等待审核商品</option>
                                <option value="status-2">正在售中商品</option>
                            </select>
                        </div>
                        <div className="form-group">
                            <input type="text"
                                   className="form-control"
                                   placeholder="请输入关键词.."
                                   name="searchKeyWord"
                                   onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
                                   onChange={(e) => this.onValueChange(e)}/>
                        </div>
                        <button  className="btn btn-primary" onClick={(e) => this.onSearch()}> <i className="fa fa-search"/> Search</button>
                    </div>
                </div>
            </div>
        );
    }
}
export default ListSearch;